<template>
  <div class="my-num">
    <div class="title">{{title}}：</div>
    <el-button type="primary" @click="subn" :disabled="num===0">-</el-button>
    <el-input class="num" v-model="num"></el-input>
    <el-button type="success" @click="addn" :disabled="num===limit">+</el-button>
  </div>
</template>

<script>
export default {
  name: "MyNum",
  props: {
    limit: {
      type: Number,
      default() {
        return 4
      }
    },
    title: String
  },
  data() {
    return {
      num: 0
    }
  },
  methods: {
    chk(num) {
      if(isNaN(num) || Number(num) > this.limit || Number(this.num) < 0) return true
      return false
    },
    addn() {
      if(this.chk(this.num)) this.num = this.limit - 1
      this.num++
      this.$emit('bk', Number(this.num))
    },
    subn() {
      if(this.chk(this.num)) this.num = 1
      this.num--
      this.$emit('bk', Number(this.num))
    }
  },
  created() {
    this.$emit('bk', 0)
  }
}
</script>

<style lang="less" scoped>
  .my-num {
    width: 100%;
    margin:10px 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 50%;
      max-width: 200px;
    }
    .num {
      margin: 0 10px;
      width: 50%;
      line-height: 40px;
      max-width: 50px;
    }
  }
</style>
